<template>
	<view :style="skin" class="content pagesBalance">
		<view class="moneyBox">
			<view class="moneyInfo">
				<view class="moneyTitle">
						{{$t('lease.onlineBalance')}} 
				</view>
				<view class="moneyBtn flex-c-SB">
					<view class="moneyNum">
						{{moneyTran(amountOnline)}}
					</view>
				<!-- 	<view class="btnBox">
						<u-button plain shape="circle" text="充值"></u-button>
					</view> -->
				</view>
			</view>

			<view class="moneyInfo1">
				<view class="moneyTitle">
					{{$t('lease.offlineBalance')}}
				</view>
				<view class="moneyBtn flex-c-SB">
					<view class="moneyNum">
						{{moneyTran(amountOffline)}}
					</view>
					<view class="btnBox">
						<u-button plain shape="circle" :text="$t('me.transfer')" @click="skip"></u-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 收入 -->
		<view class="earningBox ">
			<view class="dateBox flex-c-SB">
				<view class="dateArea" @click="calenShow = true">
					<view>
						{{startDate}}
					</view>
					<view>
						{{endtDate}}
					</view>
				</view>
				<view class="dateTabs">
					<u-tabs :scrollable="false" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}" :list="list" @click="clickTabs"></u-tabs>
				</view>
			</view>

			<view class="moneyInfo" @click="dealSkip(0)">
				<view class="moneyTitle">
					{{$t('me.turnover')}}
				</view>
				<view class="moneyBtn flex-c-SB">
					<view class="moneyNum">
						{{moneyTran(moneyObj.amountTurnover) || 0}}
					</view>
					<view class="btnBox">
						<text class="iconfont icon-a-mingchengarrow_right"></text>
					</view>
				</view>
			</view>

			<view class="moneyInfo" @click="dealSkip(1)">
				<view class="moneyTitle">
						{{$t('me.income')}}
				</view>
				<view class="moneyBtn flex-c-SB">
					<view class="moneyNum">
						{{moneyTran(moneyObj.amountIncome) || 0}}
					</view>
					<view class="btnBox">
						<text class="iconfont icon-a-mingchengarrow_right"></text>
					</view>
				</view>
			</view>

			<view class="moneyInfo">
				<view class="moneyTitle">
					{{$t('me.deposit')}}
				</view>
				<view class="moneyBtn flex-c-SB">
					<view class="moneyNum">
						{{moneyTran(moneyObj.amountDeposit) || 0}}
					</view>
					<view class="btnBox">

					</view>
				</view>
			</view>

		</view>

		<view class="layout">
			<u-cell-group :border="false">
				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large" @click="dealSkip">
					<text slot="title" class="title">{{$t('me.transaction')}}</text>
				</u-cell>
			</u-cell-group>

		<!-- 	<u-cell-group :border="false">
				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large">
					<text slot="title" class="title">待结算记录</text>
				</u-cell>
			</u-cell-group> -->
		</view>
		<u-calendar title="Date selection" monthNum='12' startText='Start' confirmDisabledText='confirm' confirmText="confirm" endText="End" color="var(--subjectColor)" :allowSameDay="true" :show="calenShow" position="top" mode="range"
			@confirm="confirm" :minDate="data1" :maxDate="data" @close="calenShow = false"></u-calendar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		gtTotal
	} from '@/api/balance.js'
	import {
		getWeekDate,
		getMonthDate,
		getDayDate
	} from '@/utils/index.js'
	import {
		addOrUpdateMoney
	} from '@/utils/sql/sqlMoney.js'
	import {
		getOffMoney
	} from '@/utils/sql/sqloffLineDtoList.js'
	import {
		getTrunOver
	} from '@/utils/sql/sqlTrunoverDtoList.js'
	import {
		getInCome
	} from '@/utils/sql/sqlInComeDtoList.js'
	export default {
		data() {
			return {
				isSync:false,
				amountOffline: 0,
				amountOnline: 0,
				calenShow: false,
				mode: 'multiple',
				data: new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1,
				data1: new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 180 ,
				moneyObj: {},
				startDate: getDayDate().startDate,
				endtDate: getDayDate().endDate,
				list: [
					{
						name: this.$t('me.day'),

					},
					{
						name: this.$t('me.weekly'),

					},
					{
						name: this.$t('me.monthly'),
					},
					{
						name: this.$t('me.time'),
					}
				]
			};
		},
		onShow() {
			this.getToalData();
			this.getOffMoney();
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		methods: {
			moneyTran(m) {
				if (m) {
					return (m / 100).toFixed(2)
				} else {
					return 0
				}
			},
			clickTabs(item) {
				console.log(item);
				this.actionIndex = item.index
				this.isMore = false
				switch (item.index) {
					case 0:
						this.startDate = getDayDate().startDate;
						this.endtDate = getDayDate().endDate;
						this.getToalData()
						break;
					case 1:
						this.startDate = getWeekDate().startDate
						this.endtDate = getWeekDate().endDate
						this.getToalData()
						break;
					case 2:
						this.startDate = getMonthDate().startDate
						this.endtDate = getMonthDate().endDate
						this.getToalData()
						break;
					case 3:
						this.calenShow = true
						break;

				}

			},
			getOffMoney() {
				gtTotal({
					startDate: '',
					endDate: ''
				}).then(async res => {
					if (res.code == 0) {
						console.log(res.data);
					let	arr = [{
							customerAccount: res.data.customerAccount,
							onMoney: res.data.amountOnline,
							offMoney: res.data.amountOffline,
							amountTotal: res.data.amountTotal,
							amountTurnover: res.data.amountTurnover,
							amountIncome: res.data.amountIncome,
							amountDeposit: res.data.amountDeposit
						
						}]
						this.amountOffline = res.data.amountOffline
						this.amountOnline = res.data.amountOnline
						let res1 = await getOffMoney();
						let res2 = await getTrunOver();
						let res3 = await getInCome();
					
						let res1Len = res1.data.length;
						let res2Len = res2.data.length;
						let res3Len = res3.data.length;
							console.log(res1Len,res2Len,res3Len);
						if (res1Len == 0 && res2Len == 0 && res3Len == 0) {//金额都同步完成了才能从线上获取数据
							arr.forEach(item => {
								addOrUpdateMoney(item);
							})
							this.isSync = true
							uni.showToast({
								title:'Amount obtained successfully',
								icon:'none'
							})
						}else{
							this.isSync = false
							uni.showToast({
								title:'Failed to obtain the amount, please synchronize the data first',
								icon:'none'
							})
						}
						
					
					}
				})
			},
			getToalData() {
				uni.showLoading({
					title:'loading',
				})
				gtTotal({
					startDate: this.startDate,
					endDate: this.endtDate
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						console.log(res.data);
						this.moneyObj = res.data
					}
				})
			},
			confirm(e) {
				console.log(e);
				console.log(e);
				this.startDate = e[0]
				this.endtDate = e[e.length - 1];
				this.calenShow = false
				this.getToalData()
			},
			skip() {
				if(!this.isSync){
					uni.showToast({
						title:'Please synchronize the data before transferring the amount',
						icon:'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesBalance/offlinemoney/offlinemoney'
				})
			},
			dealSkip(tabIndex) {
				if (tabIndex === 0 || tabIndex === 1) {
					uni.navigateTo({
						url: '/pagesBalance/dealDetail/dealDetail?tabIndex=' + tabIndex
					})
				} else {
					uni.navigateTo({
						url: '/pagesBalance/dealDetail/dealDetail'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagesBalance {
		padding: 12px;
		box-sizing: border-box;

		.moneyBox {
			height: 210px;
			padding: 20px;
			box-sizing: border-box;
			background-color: #165DFF;
			border-radius: 12px;
			margin-bottom: 16px;
			color: #fff;



		}

		.moneyInfo {
			border-bottom: 1px solid #fff;
			padding-bottom: 15px;
			margin-bottom: 15px;
		}

		.moneyTitle {
			font-size: 12px;
			margin-bottom: 4px;
			color: #fff;
		}

		.moneyBtn {
			.moneyNum {
				font-size: 28px;
				color: #fff;
			}

			.btnBox {
				width: 80px;
				text-align: right;
			}

		}

		.earningBox {
			height: 326px;
			padding: 20px;
			box-sizing: border-box;
			background-color: #FFBF6B;
			border-radius: 12px;
			margin-bottom: 16px;

			.dateArea {
				font-size: 12px;
				color: #F7F8FA;
			}

			.dateTabs {
				width: 230px;
			}
		}

		.layout {
			width: 100%;
			// height: 80px;
			margin: 32px auto 19px;
			background-color: white;
			border-radius: 19px;
			padding-top: 16px;
			padding-bottom: 16px;

			.title {
				font-size: 16px;
				font-weight: 400;
			}
		}




	}
</style>